<template>
  <div>
    <div class="match-performance-items">
      <div class="performanceClass">大名单</div>
    </div>
    <div class="box-card">
      <el-container>
        <el-header height="57px" class="pass-header"> </el-header>
        <el-main class="pass-main">
          <HomeSquad :battleTeam="battleTeam" :homeSquad="homeSquad" />
          <AwaySquad :battleTeam="battleTeam" :awaySquad="awaySquad" />
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import mixin from "../../../../mixin/mixin";
import HomeSquad from "./HomeSquad";
import AwaySquad from "./AwaySquad";
export default {
  name: "MatchSquad",
  props: {},
  mixins: [mixin],
  components: {
    HomeSquad,
    AwaySquad,
  },
  watch: {},
  data() {
    return {
      //联赛Id，中超是6
      leagueId: 6,
      //赛季下拉选择框的配置项
      options: [
        {
          season: "2019赛季",
          label: "2019赛季",
        },
        {
          season: "2018赛季",
          label: "2018赛季",
        },
        {
          season: "2017赛季",
          label: "2017赛季",
        },
        {
          season: "2016赛季",
          label: "2016赛季",
        },
      ],
      season: "2019赛季",
      homeSquad: [],
      awaySquad: [],
    };
  },
  methods: {
    //点击球队名称进入球队详细界面
    enterMatch(teamId) {
      console.log(teamId);
    },
    async getTeamSquad(matchId) {
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/matches/matchPlayer/${matchId}`
      );
      console.log("getTeamSquad方法被调用");
      this.homeSquad = data[0];
      this.awaySquad = data[1];
    },
  },
  computed: {
    battleTeam() {
      return this.$store.state.battleTeam;
    },
  },
  created() {
    console.log("squad_created");
    console.log("squad比赛id:", this.$route.params.matchId);
    // const matchId = this.$route.params.matchId;
    // this.getTeamSquad(matchId)
  },
  beforeRouteEnter(to, from, next) {
    const fromMatchId = from.params.matchId || null;
    const toMatchId = to.params.matchId;

    console.log("Squad_beforeRouteEnter:", toMatchId);
    next((vm) => {
      vm.getTeamSquad(toMatchId);
    });
  },
  // beforeRouteUpdate(to, from, next){
  //   const {matchId} = to.params;
  //   // console.log(matchId);
  //   console.log('squad_beforeRouteUpdate:',matchId);
  //   // this.matchId = parseInt(matchId);
  //   this.getTeamSquad(matchId);
  //   next()
  // }
};
</script>

<style scoped lang="scss">
.match-performance-items {
  display: flex;
  justify-content: flex-start;
  width: 1440px;
  height: 56px;
  margin: 40px auto 0;
  /*background-color: red;*/
}
.performanceClass {
  color: #16c79a;
  line-height: 56px;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 5px;
  text-align: center;
  width: 132px;
  height: 100%;
  background-color: #194568;
  border-radius: 10px 10px 0 0;
  margin-right: 3px;
}
.box-card {
  margin: auto;
  width: 1440px;
  height: 553px;
}
.pass-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #194568;
  padding: 0;
  div {
    margin-right: 10px;
  }
}
.pass-main {
  display: flex;
  height: 830px;
  padding: 0;
  background-color: #f1f6f9;
}
</style>
